<template>
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">
                在线招聘系统登录
            </h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="亲，请输入用户名">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="亲，请输入密码">
                </el-input>
            </el-form-item>
            <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
            <el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: "Login",
    data() {
        return {
            captchaUrl: "",
            loginForm: {
                username: "",
                password: "",
            },
            checked: true,
            rules: {
                username: [{ required: true, message: "请输入用户名", trigger: "blur" }, { min: 5, max: 64, message: '长度在 5 到 16 个字符', trigger: 'blur' }
                ],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }, , { min: 5, message: '密码长度要大于5', trigger: 'blur' }],
            }

        }
    },
    methods: {
        submitLogin() {
            let that = this;
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    axios.post('http://127.0.0.1:5000/api/user/login', {
                        username: that.loginForm.username,
                        password: that.loginForm.password
                    })
                        .then(function (response) {
                            console.log(response.data);
                            if (response.data.error === undefined && response.data.error === null) {
                                that.$message.error(response.data.error.message);
                            }
                            else if (response.data.result != undefined && response.data.result != null) {
                                that.$store.commit('login', that.loginForm.username);
                                that.$store.commit('saveToken', response.data.result.obj.token);
                                that.$message.success('登录成功!');
                                that.$router.push({ name: 'home', params: { isLogin: true } }, () => { }, () => { });
                            } else {
                                that.$message.error(response.data.error.message);
                                return false;
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function () {
                            // 总是会执行

                        })
                } else {
                    this.$message.error('账号或密码出错请重新输入');
                    return false;
                }
            });
        },
        getToken(userId) {
            axios.get('http://127.0.0.1:5000/api/access_token/get_obj', {
                params: {
                    user_id: userId
                }
            })
                .then(function (response) {
                    console.log(response.data.result.obj.token);
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        }
    },
    created: function () {
        if (this.$route.params.isLogout) {
            window.location.reload();
        }
    },
};
</script>

<style lang="less" scoped>
.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: aliceblue;
    border: 1px solid blueviolet;
    box-shadow: 0 0 25px #f885ff;
}

.loginTitle {
    margin: 0px auto 48px auto;
    text-align: center;
    font-size: 40px;
}

.loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
}

body {
    background-image: url("../assets/background.jpg");
    background-size: 100%;
}
</style>
